<template>
  <div class="app-container">
    <el-card class="box-card">
      <h3>证书产品介绍</h3>
      <el-form ref="goods" :rules="rules" :model="goods" label-width="150px">
        <el-form-item label="证书产品名称：" prop="certificateName">
          <el-input v-model="goods.certificateName" clearable />
        </el-form-item>
        <el-form-item label="证书产品标题：" prop="title">
          <el-input v-model="goods.title" clearable />
        </el-form-item>
        <el-form-item label="证书分类：" prop="classifyId">
          <treeselect
            v-model="goods.classifyId"
            :options="cateOptions"
            :normalizer="normalizer"
            placeholder="请选择证书产品分类"
            style="width: 260px"
          />
        </el-form-item>
        <el-form-item label="适用行业：" prop="applyIndustry">
          <el-input 
            v-model="goods.applyIndustry" 
            type="textarea"
            :autosize="{ minRows: 2 }"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否上架：" prop="status">
          <el-switch
            v-model="goods.status"
            active-value="1"
            inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="主要推荐证书：" prop="mainPush">
          <el-radio-group v-model="goods.mainPush">
            <el-radio label="1">是</el-radio>
            <el-radio label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="证书产品排序：" prop="sort">
          <el-input-number
            v-model="goods.sort"
            controls-position="right"
            :min="1"
          />
        </el-form-item>
        <el-form-item label="证书产品描述：" prop="details">
          <!-- <editor v-model="goods.details" class="editBox"></editor> -->
          <el-input
            type="textarea"
            :autosize="{ minRows: 2 }"
            placeholder="请输入证书产品描述"
            v-model="goods.details"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="证书产品备注">
          <el-input
            type="textarea"
            autosize
            placeholder="请输入证书产品备注"
            v-model="goods.remark"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="证书logo：" prop="logo">
          <el-upload
            :headers="headers"
            :action="`${baseUrl}/goods/goods/upload`"
            :show-file-list="false"
            :on-success="uploadPicUrl"
            class="avatar-uploader"
            accept=".jpg,.jpeg,.png,.gif"
          >
            <img v-if="goods.logo" :src="showUrl + goods.logo" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
        <el-form-item prop="sample" label="证书样品">
            <el-upload
            :action="`${baseUrl}/goods/goods/upload`"
            list-type="picture-card"
            :file-list="goods.pics"
            :on-success="handleAvatarSuccess1"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="证书实施作用" prop="implementRole">
          <Editor v-model="goods.implementRole" />
        </el-form-item>
        <!-- <el-form-item label="图片列表：" prop="pics">
          <el-upload
            :headers="headers"
            :action="`${baseUrl}/upload/file`"
            :limit="10"
            :file-list="picsFileList"
            :on-exceed="uploadOverrun"
            :on-success="handlePicsUrl"
            :on-remove="handleRemove"
            multiple
            accept=".jpg,.jpeg,.png,.gif"
            list-type="picture-card"
          >
            <i class="el-icon-plus" />
          </el-upload>
        </el-form-item> -->
      </el-form>
    </el-card>

    <el-card class="box-card">
      <h3>证书产品规格</h3>
      <el-card shadow="never">
        <div v-for="(productAttr, idx) in selectProductAttr" :key="idx">
          {{ productAttr.name }}：
          <el-checkbox v-model="productAttr.isTrue" @change="handleCheckAllChanged(idx,productAttr.isTrue)">全选</el-checkbox>
          <el-checkbox-group
            v-model="productAttr.values"
            class="s_mt"
            @change="change"
          >
            <el-checkbox
              v-for="(item, index) in productAttr.select"
              :label="item"
              :key="index"
              class="ml_8"
            ></el-checkbox>
          </el-checkbox-group>
          <el-input
            v-model="productAttr.inputValue"
            class="inp"
            clearable
          ></el-input>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-plus"
            class="ml_8"
            @click="handleAddProductAttrValue(idx)"
            >增加</el-button
          >
        </div>
      </el-card>
      <!-- <div style="text-align:right">
        <el-form inline>
          <el-form-item>
            <el-input-number controls-position="right" :min="0" v-model="oneMoney"></el-input-number>
          </el-form-item>
          <el-form-item>
            <el-button :disabled="oneMoney == 0" type="primary" @click="onekey" size="mini">一键改价</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table style="width: 100%; margin-top: 20px" @selection-change="specChange" :data="specData" border v-loading="loadingSKU">
        <el-table-column
          type="selection"
          align="center"
          width="55">
        </el-table-column>
        <el-table-column
          v-for="(item, index) in selected"
          :label="item.name"
          :key="item.id"
          align="center"
        >
          <template slot-scope="scope">
            {{ getProductSkuSp(scope.row, index) }}
          </template>
        </el-table-column>
        <el-table-column label="价格/元" width="220" align="center">
          <template slot-scope="scope">
            <el-input min="0" v-model="scope.row.price"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleRemoveProductSku(scope.$index, scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button
        type="primary"
        style="margin-top: 20px"
        @click="handleRefreshList"
        >刷新列表
      </el-button> -->
    </el-card>

    <div class="op-container">
      <el-button type="primary" @click="handlePublish">保 存</el-button>
      <el-button type="danger" @click="handleCancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import {
  addGood,
  updateGood,
  queryGoodInfo,
  queryGoodsAttr,
  queryGoodsCate,
} from "@/api/goods/goods";
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Editor from "@/components/Editor";
import { setTimeout } from 'timers';

export default {
  name: "GoodsAdd",
  components: { Treeselect, Editor },
  data() {
    return {
      loadingSKU:false,
      headers: { Authorization: "Bearer " + getToken() },
      baseUrl: process.env.VUE_APP_BASE_API,

      goodId: undefined,

      // 商品表单
      goods: { logo: "", pics: [] },
      rules: {
        mainPush: [
          { required: true, message: "请选择是否为主要推荐证书产品", trigger: "blur" }
        ],
        certificateName: [
          { required: true, message: "证书产品名称不能为空", trigger: "blur" },
        ],
        applyIndustry: [
          { required: true, message: "适用行业不能为空", trigger: "blur" }
        ],
        implementRole: [
          { required: true, message: "证书产品实施作用不能为空", trigger: "blur" }
        ],
        title: [
          { required: true, message: "证书产品标题不能为空", trigger: "blur" },
        ],
        classifyId: [
          { required: true, message: "请选择证书产品分类", trigger: "blur" },
        ],
        sort: [
          { required: true, message: "请选择证书产品排序", trigger: "blur" },
        ],
        logo: [
          { required: true, message: "请上传证书产品Logo", trigger: "blur" },
        ],
        details: [
          { required: true, message: "证书产品描述不能为空", trigger: "blur" },
        ],
        status: [
          {
            required: true,
            message: "请选择证书产品上下架状态",
            trigger: "blur",
          },
        ],
        pics: [
          {
            required: true,
            message: "证书产品图片列表不能为空",
            trigger: "blur",
          },
        ],
      },
      picsFileList: [],

      // 商品分类数据
      cateOptions: [],

      // 选择商品规格
      selectProductAttr: [],
      // 已选择的商品规格
      selected: [],

      // 新增的规格值
      // addProductAttrValue: undefined,

      // 规格表格
      specData: [],

      // 传递的参数值
      goodsAttributeValue: [],
      seleChange:[],
      oneMoney:0
    };
  },
  watch: {
    $route(to, from) {
      // console.log(to, from, "egerbgejp");
      if (from.name == "GoodsList") {
        // console.log(this.$route.query.goodId);
        if (this.$route.query.goodId == -100) {
          // console.log(this.specData,"添加");
          this.goodId = this.$route.query.goodId;
          this.getGoodInfo();
          this.fetchCateList();
          this.fetchSpecList();
        } else {
          this.goodId = this.$route.query.goodId;
          this.getGoodInfo();
          this.fetchCateList();
          this.fetchSpecList();
        }
      }
    },
  },
  created() {
    // let arr = [{name:'123',values:['安徽省']},{name:'1234',values:['66-85']}]
    // for(let i=0;i<arr.length;i++) {
    //   for(let a=0;a<arr[i].values.lenght;a++){
    //     arr[i].values[a] = arr[i].values[a].map(item => {
    //       return{
    //         name:item,
    //         isClick:0
    //       }
    //     })
    //   }
    // }
    
    this.fetchCateList();
    this.fetchSpecList();
    this.goodId = this.$route.query.goodId;
    if (this.goodId == -100 || this.goodId == undefined) {
      this.goodId = this.$route.query.goodId;
    } else {
      this.goodId = this.$route.query.goodId;
      this.getGoodInfo();
    }
  },

  methods: {
    // 一键改价
    onekey() {
      // i总商品
      // a选中
      for(let i = 0;i<this.specData.length;i++){
        for(let a=0;a<this.seleChange.length;a++){
          if(this.specData[i].spData == this.seleChange[a].spData){
            // this.specData[i].spData = JSON.parse(this.specData[i].spData)
            this.$nextTick(function(){
              this.$set(this.specData[i], 'price', this.oneMoney)
              // Object.assign(this.specData[i],m);
              // this.specData[i].spData = JSON.stringify(this.specData[i].spData)
    				})
            this.$forceUpdate();
            console.log(this.specData)
            // this.specData[i].spData = this.specData[i].spData.concat('')
          }
        }
      }
    },
    // 上传多张
    handleAvatarSuccess1(res) {
        if(res.code == 200){
            let data ={
                url:this.showUrl + res.data
            }

          if(this.goods.pics == null){
            this.goods.pics = []
            this.goods.pics.push(data)
          }else {
            this.goods.pics.push(data)
          }
        }
    },
    handleRemove(file, fileList) {
      // console.log(fileList,'在这')
        this.goods.pics = fileList
    },
    specChange(val) {
      // console.log(val)
      // for(let i =0;i<val.length;i++){
        this.seleChange = val;
        console.log(this.seleChange)
        // this.seleChange = JSON.parse(val[i].spData);
      // }
      // console.log(this.seleChange)
    },
    handleCheckAllChanged(idx,is){
      if(is == true){
        this.selectProductAttr[idx].values = this.selectProductAttr[idx].select;
        this.$message({
          message: "操作成功,请及时刷新规格列表",
          type: "success",
          duration: 2000,
        });
      }else{
          this.selectProductAttr[idx].values = [];
          this.$message({
              message: "操作成功,请及时刷新规格列表",
              type: "success",
              duration: 2000,
            });
      }
      //   if(this.selectProductAttr[idx].values.length<1){
      // console.log('没有')

      //     this.selectProductAttr[idx].values = this.selectProductAttr[idx].select;
      //     this.$message({
      //       message: "操作成功,请及时刷新规格列表",
      //       type: "success",
      //       duration: 2000,
      //     });
      //   }else{
      //   console.log('有')
      //     // if(this.selectProductAttr[idx].values.length ==)
      //     this.selectProductAttr[idx].values = this.selectProductAttr[idx].select;

      //     // this.selectProductAttr[idx].values = [];
      //     this.$message({
      //       message: "操作成功,请及时刷新规格列表",
      //       type: "success",
      //       duration: 2000,
      //     });
      //   }
        this.$forceUpdate()
      // console.log(this.selectProductAttr)
    },
    // 获取商品规格列表
    fetchSpecList() {
      queryGoodsAttr().then((res) => {
        if (res.code == 200) {
          this.selectProductAttr = res.rows;
          this.selectProductAttr.forEach((item) => {
            item.select = item.inputList.split(",");
            item.values = [];
          });
        } else {
          this.msgError("获取商品规格数据失败");
        }
      });
    },
    change(e) {
      this.$forceUpdate();
    },
    // 获取商品分类数据
    fetchCateList() {
      queryGoodsCate({
        pageNum: 1,
        pageSize: 1000,
      })
        .then((res) => {
          this.cateOptions = this.handleTree(res.rows, "id");
          console.log(this.cateOptions, "商品分类列表123");
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // 转换商品分类数据结构
    normalizer(node) {
      if (node.children == null || node.children == "null") {
        delete node.children;
      }
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.classifyName,
        children: node.children,
      };
    },

    // 成功上传商品logo
    uploadPicUrl(res) {
      this.goods.logo = res.data;
      // console.log(this.goods);
    },
    // 图片列表超出限制数量
    uploadOverrun: function () {
      this.$message({
        type: "error",
        message: "上传文件个数超出限制!最多上传5张图片!",
      });
    },
    // 图片列表上传成功
    handlePicsUrl(res, file, fileList) {
      // console.log(res)
      // console.log(file)
      // console.log(fileList)
      if (res.code === 200) {
        this.goods.pics.push(res.url);
      }
    },
    // // 图片列表点击删除
    // handleRemove(file, fileList) {
    //   for (var i = 0; i < this.goods.pics.length; i++) {
    //     // 这里存在两种情况
    //     // 1. 如果所删除图片是刚刚上传的图片，那么图片地址是file.response.data.url
    //     //    此时的file.url虽然存在，但是是本机地址，而不是远程地址。
    //     // 2. 如果所删除图片是后台返回的已有图片，那么图片地址是file.url
    //     var url;
    //     if (file.response === undefined) {
    //       url = file.url;
    //     } else {
    //       url = file.response.data.url;
    //     }
    //     if (this.imgUrl + this.goods.pics[i] === url) {
    //       this.goods.pics.splice(i, 1);
    //     }
    //   }
    // },

    // 获取商品信息
    getGoodInfo() {
      let that = this;
      // this.goodId = this.$route.query.goodId;
      if(that.goodId != -100 && that.goodId){
        queryGoodInfo(that.goodId).then((res) => {
        if (res.code == 200) {
          that.goods = res.data.certificateGoods;
          that.goods.pics = JSON.parse(JSON.stringify(that.goods.piceList));
          that.picsFileList = [];
          // for (var i = 0; i < that.goods.pics.length; i++) {
          //   that.picsFileList.push({
          //     url: that.imgUrl + that.goods.pics[i],
          //   });
          // }
          if(res.data.specificationsList != null){
            for(let i=0;i<this.selectProductAttr.length;i++) {
              for(let j = 0;j<res.data.specificationsList.length;j++) {
                if(res.data.specificationsList[j].id == this.selectProductAttr[i].id){
                  this.selectProductAttr[i].values = res.data.specificationsList[j].values
                }
              }
            }
          }
          console.log(that.selectProductAttr,'奢香夫人')
          that.goodsAttributeValue = res.data.goodsAttributeValue;
          that.specData = res.data.goodsSkuStock;
          // console,log(that.specData)
          setTimeout(function(){
            that.getSpecData();
          },500)
        }
      });
      }else{
        that.goods={ logo: "", pics: [] };
        that.picsFileList=[];
        that.goodsAttributeValue=[];
        that.specData=[];
      }
    },
    // 编辑状态下处理规格数据
    getSpecData() {
      // console.log(this.selectProductAttr,'selectProductAttr--------------原始数据------')
      // console.log(this.goodsAttributeValue,'goodsAttributeValue--------------------')
      for (var i in this.selectProductAttr) {
      //    console.log(this.selectProductAttr[i].values,'-----------------------12121')
      //    console.log(this.goodsAttributeValue[i].value.split(','),'bug----------------------------------')
        for(var k in this.goodsAttributeValue){
          if(this.selectProductAttr[i].name == this.goodsAttributeValue[k].goodsAttributeName){
            this.selectProductAttr[i].values = this.goodsAttributeValue[k].value.split(",");
            for (var j in this.selectProductAttr[i].values) {
              var eg = this.selectProductAttr[i].values[j];
              if (this.selectProductAttr[i].select.indexOf(eg) < 0) {
                this.selectProductAttr[i].select.push(eg);
                this.selectProductAttr[i].inputList = this.selectProductAttr[i].select.join(",");
              }
            }
          }
          }
        }
      this.editSelected();
    },
    // 需要处理出一个selected
    editSelected() {
      this.selected = this.selectProductAttr.filter((item) => {
        return item.values.length > 0;
      });
      // console.log(this.selected,'data-----------------------------------------------------')
      this.goodsAttributeValue = [];
      this.selected.forEach((item) => {
        this.goodsAttributeValue.push({
          goodsAttributeId: item.id,
          value: item.values.join(","),
        });
      });
    },


    // 点击取消
    handleCancel() {
      this.$router.push({ path: "/list" });
    },

    // 点击上架商品
    handlePublish() {

      let arrList = this.selectProductAttr.map(item => {
        return{
          id:item.id,
          name:item.name,
          values:item.values,
          isClick:0
        }
      })

      let data = []
      if(this.goods.pics == ''){
        this.goods.pics = null
      }else {
        // this.goods.pics = this.goods.pics.join(",");
        this.goods.pics = JSON.stringify(this.goods.pics)
      }
      console.log(
        this.goods.pics,
        "-----------------------------------------------------"
      );
      console.log(this.selectProductAttr,'在这')
      console.log(arrList)
      const finalGoods = {
        // specifications:arrList,
        certificateGoods: this.goods,
        goodsSkuStock: this.specData,
        goodsAttributeValue: this.goodsAttributeValue,
      };
      finalGoods.certificateGoods.specifications = JSON.stringify(arrList)
      console.log(this.specData, "表格数据");
      if (this.goodId!=-100 && this.goodId ) {
        // 编辑商品
        updateGood(finalGoods).then((res) => {
          if (res.code == 200) {
            this.msgSuccess("商品修改成功");
            this.goods = {};
            this.picsFileList = [];
            this.specData = [];
            this.goodsAttributeValue = [];
            this.selectProductAttr = [];
            this.$router.push({ path: "/goods/goodsList" });
          } else {
            this.msgError("商品修改失败");
          }
        });
      } else {
        // 添加商品
        addGood(finalGoods).then((res) => {
          if (res.code == 200) {
            this.msgSuccess("商品添加成功");
            this.goods = {};
            this.picsFileList = [];
            this.specData = [];
            this.goodsAttributeValue = [];
            this.selectProductAttr = [];
            this.$router.push({ path: "/goods/goodsList" });
          } else {
            this.msgError("商品添加失败");
          }
        });
      }
    },

    // 获取可选值列表
    getInputListArr(inputList) {
      return inputList.split(",");
    },

    // 点击添加规格值
    handleAddProductAttrValue(idx) {
      let options = this.selectProductAttr[idx].select;
      console.log(this.selectProductAttr[idx].inputValue, "输入的值");
      if (
        this.selectProductAttr[idx].inputValue == null ||
        this.selectProductAttr[idx].inputValue == "" ||
        this.selectProductAttr[idx].inputValue == undefined
      ) {
        this.$message({
          message: "规格值不能为空",
          type: "warning",
          duration: 1000,
        });
        return;
      }
      if (options.indexOf(this.selectProductAttr[idx].inputValue) !== -1) {
        this.$message({
          message: "属性值不能重复",
          type: "warning",
          duration: 1000,
        });
        return;
      }
      this.selectProductAttr[idx].select.push(
        this.selectProductAttr[idx].inputValue
      );
      this.selectProductAttr[idx].inputValue = null;
    },
    // 点击刷新
    handleRefreshList() {
      this.$confirm("是否要刷新", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.loadingSKU = true;
        this.getSkuList();
      });
    },
    // 表格展示数据
    getProductSkuSp(row, index) {
      let spData = JSON.parse(row.spData);
      if (spData != null && index < spData.length) {
        // console.log(spData[index].value,'表格内容--------------------------------------')
        return spData[index].value;
      } else {
        return null;
      }
    },
    // 计算表格
    getSkuList() {
      this.selected = [];
      this.specData = [];
      // console.log(this.selectProductAttr, '刷新列表重新计算表格-----------------------------')
      // console.log(this.selectProductAttr,'商品规格未处理前的原生数据')
      this.selected = this.selectProductAttr.filter((item) => {
        return item.values.length > 0;
      });
      console.log(this.selected, "selected数据--------------------------------");
      this.goodsAttributeValue = [];
      this.selected.forEach((item) => {
        this.goodsAttributeValue.push({
          goodsAttributeId: item.id,
          value: item.values.join(","),
        });
      });

      // this.specData = [];
      // 数据深拷贝
      let skuList = JSON.parse(JSON.stringify(this.specData));
      console.log(skuList,'在这')
      if (this.selected.length === 1) {
        let attr = this.selected[0];
        for (let i = 0; i < attr.values.length; i++) {
          skuList.push({
            spData: JSON.stringify([{ key: attr.name, value: attr.values[i] }]),
            price: 0
          });
        }
        // console.log(skuList);
      } else if (this.selected.length === 2) {
        let attr0 = this.selected[0];
        let attr1 = this.selected[1];
        for (let i = 0; i < attr0.values.length; i++) {
          for (let j = 0; j < attr1.values.length; j++) {
            let spData = [];
            spData.push({ key: attr0.name, value: attr0.values[i] });
            spData.push({ key: attr1.name, value: attr1.values[j] });
            skuList.push({
              spData: JSON.stringify(spData),
              price:0
            });
          }
        }
        // console.log(skuList);
      } else if (this.selected.length === 3) {
        let attr0 = this.selected[0];
        let attr1 = this.selected[1];
        let attr2 = this.selected[2];
        for (let i = 0; i < attr0.values.length; i++) {
          for (let j = 0; j < attr1.values.length; j++) {
            for (let k = 0; k < attr2.values.length; k++) {
              let spData = [];
              spData.push({ key: attr0.name, value: attr0.values[i] });
              spData.push({ key: attr1.name, value: attr1.values[j] });
              spData.push({ key: attr2.name, value: attr2.values[k] });
              skuList.push({
                spData: JSON.stringify(spData),
                price:0
              });
            }
          }
        }
        // console.log(skuList);
      } else if (this.selected.length === 4) {
        let attr0 = this.selected[0];
        let attr1 = this.selected[1];
        let attr2 = this.selected[2];
        let attr3 = this.selected[3];
        for (let i = 0; i < attr0.values.length; i++) {
          for (let j = 0; j < attr1.values.length; j++) {
            for (let k = 0; k < attr2.values.length; k++) {
              for (let h = 0; h < attr3.values.length; h++) {
                let spData = [];
                spData.push({ key: attr0.name, value: attr0.values[i] });
                spData.push({ key: attr1.name, value: attr1.values[j] });
                spData.push({ key: attr2.name, value: attr2.values[k] });
                spData.push({ key: attr3.name, value: attr3.values[h] });
                skuList.push({
                  spData: JSON.stringify(spData),
                  price:0
                });
              }
            }
          }
        }
      } else if (this.selected.length === 5) {
        let attr0 = this.selected[0];
        let attr1 = this.selected[1];
        let attr2 = this.selected[2];
        let attr3 = this.selected[3];
        let attr4 = this.selected[4];
        for (let i = 0; i < attr0.values.length; i++) {
          for (let j = 0; j < attr1.values.length; j++) {
            for (let k = 0; k < attr2.values.length; k++) {
              for (let h = 0; h < attr3.values.length; h++) {
                for (let l = 0; l < attr4.values.length; l++) {
                  let spData = [];
                  spData.push({ key: attr0.name, value: attr0.values[i] });
                  spData.push({ key: attr1.name, value: attr1.values[j] });
                  spData.push({ key: attr2.name, value: attr2.values[k] });
                  spData.push({ key: attr3.name, value: attr3.values[h] });
                  spData.push({ key: attr4.name, value: attr4.values[l] });
                  skuList.push({
                    spData: JSON.stringify(spData),
                    price:0
                  });
                }
              }
            }
          }
        }
      } else {
        let attr0 = this.selected[0];
        let attr1 = this.selected[1];
        let attr2 = this.selected[2];
        let attr3 = this.selected[3];
        let attr4 = this.selected[4];
        let attr5 = this.selected[5];
        console.log(attr0, "问题数据");
        for (let i = 0; i < attr0.values.length; i++) {
          for (let j = 0; j < attr1.values.length; j++) {
            for (let k = 0; k < attr2.values.length; k++) {
              for (let h = 0; h < attr3.values.length; h++) {
                for (let l = 0; l < attr4.values.length; l++) {
                  for (let o = 0; o < attr5.values.length; o++) {
                    let spData = [];
                    spData.push({ key: attr0.name, value: attr0.values[i] });
                    spData.push({ key: attr1.name, value: attr1.values[j] });
                    spData.push({ key: attr2.name, value: attr2.values[k] });
                    spData.push({ key: attr3.name, value: attr3.values[h] });
                    spData.push({ key: attr4.name, value: attr4.values[l] });
                    spData.push({ key: attr5.name, value: attr5.values[o] });
                    skuList.push({
                      spData: JSON.stringify(spData),
                      price:0
                    });
                  }
                }
              }
            }
          }
        }
      }
      this.specData = skuList;
      console.log(this.specData,'spceData')
      this.loadingSKU = false;
    },
    // 点击删除某个规格
    handleRemoveProductSku(index, row) {
      let list = this.specData;
      if (list.length === 1) {
        list.pop();
      } else {
        list.splice(index, 1);
      }
    },
  },
};
</script>

<style>
/* @import '../../../assets/styles/_uploadStyle.scss'; */
.el-card {
  margin-bottom: 10px;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.input-new-keyword {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.inp_width {
  width: 50%;
}

.avatar-uploader .el-upload {
  width: 148px;
  height: 148px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}

.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
.editBox {
  width: 100%;
  height: 460px;
}
.ml_8 {
  margin-left: 8px;
}
.s_mt {
  margin: 10px 0 15px;
}
.inp {
  width: 160px !important;
  height: 30px !important;
  margin-left: 10px;
  margin-bottom: 20px;
}
</style>
